<template>
  <Transition name="slide-up">
    <div
      v-if="isVisible"
      class="hand-card-area"
      role="region"
      aria-label="手牌选择区域"
    >
      <!-- 玩家标识 -->
      <div class="player-header">
        <div class="player-name" role="heading" aria-level="2">
          {{ playerName }} 的手牌
        </div>
        <div class="selection-info" aria-live="polite" aria-atomic="true">
          <Transition name="fade" mode="out-in">
            <span v-if="selectedCards.length > 0" key="selected">
              已选择 {{ selectedCards.length }} 张牌
            </span>
            <span v-else key="hint" class="hint-text"> 点击选择要出的牌 </span>
          </Transition>
        </div>
      </div>

      <!-- 手牌区域 -->
      <div class="cards-container">
        <div
          class="cards-scroll"
          role="list"
          aria-label="可选择的手牌"
          tabindex="0"
        >
          <TransitionGroup name="card-list">
            <div
              v-for="card in cards"
              :key="card.id"
              role="listitem"
              :tabindex="readonly ? -1 : 0"
              :aria-label="`${card.display}，${isCardSelected(card) ? '已选中' : '未选中'}`"
              @keydown.enter="handleCardClick(card)"
              @keydown.space.prevent="handleCardClick(card)"
              class="hand-card-wrapper"
            >
              <PokerCard
                :card="card"
                :selected="isCardSelected(card)"
                :size="'small'"
                class="hand-card"
                @click="handleCardClick"
              />
            </div>
          </TransitionGroup>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { Card } from '../types/card'
import PokerCard from './PokerCard.vue'

interface Props {
  cards: Card[] // 要显示的手牌
  selectedCards: Card[] // 已选中的卡牌
  isVisible: boolean // 是否显示该区域
  playerName: string // 玩家名称
  readonly?: boolean // 是否只读模式
}

interface Emits {
  (e: 'cardSelect', card: Card): void // 卡牌选择事件
  (e: 'cardDeselect', card: Card): void // 卡牌取消选择事件
  (e: 'selectionClear'): void // 清空选择事件
}

const props = withDefaults(defineProps<Props>(), {
  readonly: false,
})

const emit = defineEmits<Emits>()

// 检查卡牌是否被选中
const isCardSelected = (card: Card): boolean => {
  return props.selectedCards.some(
    (selectedCard: Card) => selectedCard.id === card.id
  )
}

// 处理卡牌点击
const handleCardClick = (card: Card) => {
  if (props.readonly) return

  if (isCardSelected(card)) {
    emit('cardDeselect', card)
  } else {
    emit('cardSelect', card)
  }
}
</script>

<style scoped>
/* 滑入动画 */
.slide-up-enter-active {
  animation: slideUp 0.3s ease-out;
}

.slide-up-leave-active {
  animation: slideUp 0.3s ease-in reverse;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 卡牌列表动画 */
.card-list-move {
  transition: transform 0.3s ease;
}

.card-list-enter-active {
  transition: all 0.3s ease;
}

.card-list-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}

.card-list-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.card-list-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.hand-card-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border-top: 2px solid rgba(253, 126, 20, 0.5);
  padding: var(--spacing-md);
  z-index: 1000;
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.player-name {
  color: var(--btn-primary);
  font-weight: bold;
  font-size: 16px;
}

.selection-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.hint-text {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.cards-container {
  max-height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards-scroll {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
  scrollbar-width: thin;
  scrollbar-color: rgba(253, 126, 20, 0.5) transparent;
  padding: 20px 0;
}

.cards-scroll::-webkit-scrollbar {
  height: 6px;
}

.cards-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.cards-scroll::-webkit-scrollbar-thumb {
  background: rgba(253, 126, 20, 0.5);
  border-radius: 3px;
}

.cards-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(253, 126, 20, 0.7);
}

.hand-card {
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.hand-card:hover {
  transform: translateY(-8px) scale(1.05);
  filter: brightness(1.1);
}

.hand-card:active {
  transform: translateY(-5px) scale(1.02);
  transition-duration: 0.1s;
}

.hand-card.selected {
  transform: translateY(-15px);
  box-shadow: 0 8px 20px rgba(253, 126, 20, 0.6);
  filter: brightness(1.15);
}

.hand-card.selected::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(253, 126, 20, 0.8);
  animation: bounce 0.6s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

.hand-card-wrapper {
  flex-shrink: 0;
  outline: none;
}

.hand-card-wrapper:focus {
  outline: 2px solid rgba(253, 126, 20, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

.hand-card-wrapper:focus .hand-card {
  filter: brightness(1.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hand-card-area {
    padding: var(--spacing-sm);
  }

  .player-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .player-name {
    font-size: 14px;
  }

  .selection-info {
    font-size: 12px;
  }

  .cards-container {
    max-height: 100px;
  }

  .cards-scroll {
    gap: 4px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .hand-card-area {
    padding: 10px;
  }

  .hand-card-wrapper {
    min-width: 60px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hand-card:active {
    transform: translateY(-5px) scale(1.1);
  }

  .cards-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .hand-card-wrapper {
    scroll-snap-align: start;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .hand-card-area {
    border-top: 3px solid #fd7e14;
    background: rgba(0, 0, 0, 1);
  }

  .player-name {
    color: #ffffff;
    text-shadow: 0 0 2px #000000;
  }

  .hand-card.selected::before {
    border-top-color: #fd7e14;
  }

  .hand-card-wrapper:focus {
    outline: 3px solid #fd7e14;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .slide-up-enter-active,
  .slide-up-leave-active,
  .fade-enter-active,
  .fade-leave-active,
  .card-list-move,
  .card-list-enter-active,
  .card-list-leave-active,
  .hand-card,
  .hand-card.selected::before {
    animation: none !important;
    transition: none !important;
  }

  .hand-card:hover,
  .hand-card:active,
  .hand-card.selected {
    transform: none !important;
  }
}
</style>
